﻿<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/Site.Master"  CodeBehind="Custom_Chart.aspx.cs" Inherits="Fish_Atlantis.Chart" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>亚特兰蒂斯-图表</title>
    <script src="/scripts/jquery.1.3.2.js" type="text/javascript" language="javascript"></script>
        <link href="/styles/core.css" type="text/css" rel="stylesheet"/>
        <script src="/scripts/popup_layer.js" type="text/javascript" language="javascript"></script>
    <style type="text/css">
        body { font-family: Tahoma, Arial, Verdana; font-size: 12px; background-image:url(); color: black;  }
    </style>
        <script src="/Scripts/amcharts.js" type="text/javascript"></script>        
        <script type="text/javascript">
            var point = {
        x:0,
        y:0
    };
           var tempdata1 = new Array();
           var tempdata2 = new Array();
            var chart;
            var sentence1="<%=sentence1%>";
            var sentence2="<%=sentence2%>";
            var chartData=<%=datastr%>;

            $(document).ready(function() {
            <%for(int i=0;i<count1;i++){%>
                tempdata1[<%=i%>]="<%=tdt1[i]%>";
            <%}%>
            <%for(int i=0;i<count2;i++){%>
                tempdata2[<%=i%>]="<%=tdt2[i]%>";
            <%}%>
            });
            function handleClick(event) {
                   alert(tempdata1[event.item.index]);
            }
            AmCharts.ready(function () {
                // SERIAL CHART
                chart = new AmCharts.AmSerialChart();
                chart.dataProvider = chartData;
                chart.categoryField = "country";
                chart.startDuration = 1;

                // AXES
                // category
                var categoryAxis = chart.categoryAxis;
                categoryAxis.labelRotation = 90;
                categoryAxis.gridPosition = "start";

                // value
                // in case you don't want to change default settings of value axis,
                // you don't need to create it, as one value axis is created automatically.

                // GRAPH
                var graph = new AmCharts.AmGraph();
                graph.valueField = "visits";
                graph.balloonText = "[[category]]: [[value]]";
                graph.type = "column";
                graph.colorField = "color";
                graph.lineAlpha = 0;
                graph.fillAlphas = 0.8;
                chart.addGraph(graph);
                chart.addListener("clickGraphItem", handleClick);
                chart.write("chartdiv");
            });
            /////////////////////////////////////////////////////////////////////////////////////////////////////////////////
            var chart2;

            var chartData2 = <%=datastr2%>;

            function handleClick2(event) {
            var x=document.getElementById("blk3");
            if(x.style.display=="none")
                document.getElementById("smcontent").innerHTML=tempdata2[event.dataItem.index];
               //   alert(event.dataItem.title + ": " + event.dataItem.value);


                x.style.display="block";

            /// document.getElementById('yyy').value=document.documentElement.scrollLeft+event.clientX;
                ////////////////////////////////////////////////////////////////////////////////
            }

            AmCharts.ready(function () {
                // PIE CHART
                chart = new AmCharts.AmPieChart();
                chart.dataProvider = chartData2;
                chart.titleField = "country";
                chart.valueField = "value";
                chart.colorField = "color";
                chart.outlineColor = "#FFFFFF";
                chart.outlineAlpha = 0.8;
                chart.outlineThickness = 2;
                // this makes the chart 3D
                chart.depth3D = 15;
                chart.angle = 30;
                chart.addListener("clickSlice", handleClick2);
                // WRITE
                chart.write("chartdiv2");
            });
           /////////////////////////////////////////////////////////////////////////////////////////////////////////////////
            
function getMousePoint(ev) {

    var xxx=document.getElementById("blk3");
    if(xxx.style.display=="none")
    {
        if(typeof window.pageYOffset != 'undefined') {
        point.x = window.pageXOffset;
        point.y = window.pageYOffset;
    }
    else if(typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
        point.x = document.documentElement.scrollLeft;
        point.y = document.documentElement.scrollTop;
    }
    else if(typeof document.body != 'undefined') {
        point.x = document.body.scrollLeft;
        point.y = document.body.scrollTop;
    }

    point.x += ev.clientX;
    point.y += ev.clientY;
    if(point.x>800)
       point.x-=500;
    xxx.style.left=point.x+"px";
    xxx.style.top=point.y+"px";
    }
    

}
    document.onmousedown = getMousePoint;

function skd(){document.getElementById("blk3").style.display="none";}
    </script>
</asp:Content> 

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server" >  
	<div >
        <h1 style="text-align:center"><script>document.write(sentence1);</script></h1>
    </div>
    <div id="chartdiv" style="width: 80%; height: 400px; margin-left: auto;margin-right: auto;">
    </div>

    <div>
        <h1 style="text-align:center"><script>document.write(sentence2);</script></h1>
    </div>
    <div id="chartdiv2" style="width: 90%; height: 400px; margin-left: auto;margin-right: auto;">
    </div>

    
        <div id="blk3" class="blk" style="display:none; position:absolute; top:0;left:0">
            <div class="head"><div class="head-right"></div></div>
            <div class="main">
                <a href="javascript:void(0)" id="close3" onclick="skd()" class="closeBtn">关闭</a>
                <ul>
                    <p id="smcontent">dewryukiuygedwsedrfgthuol,ukyjmhgtrfedqxerfegtrbhytujnk,lh
                    egtbyujmk,oil.,mewqzsdgtril.;o
                    evbtrynthmyjuk,il.o;/';lkjgxsdcgrbthno.;
                    wdcegbthnyjmo</p>

                </ul>
            </div>
            <div class="foot"><div class="foot-right"></div></div>
        </div>
       
</asp:Content> 
